import React, { useCallback } from 'react'
import { Button, Input, Form, NavBar, Toast } from 'react-vant'
import { Link, useNavigate } from 'react-router-dom'
import { Search } from '@react-vant/icons'
import request, { baseUrl } from '../utils/request'
import { Contact } from '@react-vant/icons'
import store from '@/store'

// console.log('store', store);
function Login() {
    const [form] = Form.useForm()
    const navigate = useNavigate()

    // 发送登录请求
    const onFinish = useCallback(async (values) => {
        const { data } = await request.get('/user/_login', {
            params: {
                ...values
            }
        })
        console.log('data.code', data)

        if (data.code === 400) {
            Toast.fail(data.msg)
            return
        }

        store.dispatch({ type: 'login', payload: data.data[0] })

        Toast.success(data.msg)
        navigate('/noddle')
    }, [])


    return (
        <div className='Login'>

            <Form
                form={form}
                onFinish={onFinish}
                footer={
                    <div style={{ margin: '16px 16px 0' }}>
                        <Button round nativeType='submit' type='warning' block style={{ border: 'none' }}>
                            登录
                        </Button>
                        <p style={{ marginTop: '20px' }}>没有账户？去<Link to='/reg'>注册</Link></p>

                    </div>
                }
            >
                <Form.Item style={{ color: '#ccc', fontSize: ' 20px' }}>
                    欢迎登录  '趣学面馆'
                </Form.Item>
                <Form.Item
                    style={{ paddingLeft: '25px' }}

                    // intro='确保这是唯一的用户名'
                    rules={[{ required: true, message: '请填写用户名' }]}
                    name='username'
                    label='用户名'
                >
                    <Input placeholder='用户名' />
                </Form.Item>
                <Form.Item
                    rules={[{ required: true, message: '请填写密码' }]}
                    name='password'

                    label='密码'

                >
                    <Input placeholder='密码'
                        type='password'

                    />
                </Form.Item>

            </Form>
        </div>
    )
}
export default Login